<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2 h-5">
        <div class="a-3">
          <Header v-bind:state="7"></Header>
        </div>
      </div>
    </div>
    <!--个人中心-->
    <div class="h-1">
      <div class="h-2">
        <!--消息通知-->
        <div class="a-14 h-3">
          <div class="a-15">
            <img class="a-16" src="@/assets/image/user5.png" />
            <div class="a-17">
              <el-carousel height="30px" direction="vertical" >
                <el-carousel-item v-for="(item,index) in noticeList" :key="index">{{item.noticeContent}}</el-carousel-item>
              </el-carousel>
              <!-- <div class="swiper-container swiper-containerOne">
                                <div class="swiper-wrapper clearfix">
                                    <div class="swiper-slide">
                                        <div id="box">
                                            <ul id="con1" ref="con1" :class="{anim:animate==true}">
                                                <li v-for='item in items' :key="item.id">{{item.name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
              </div>-->
            </div>
          </div>
        </div>

        <!--内容-->
        <div class="h-6">
          <!--左边-->
          <div class="h-7">
            <div class="h-8">
              <img v-if="user.avatar" class="h-9" :src="user.avatar" />
              <img v-else class="h-9" src="@/assets/image/user18.png" />
              <div class="h-10">{{user.nickName}}</div>
              <!-- <div class="h-11">湖北武汉</div> -->
              <div class="h-12">资料完整度：</div>
              <div class="h-13">
                <span class="h-14" style="position:relative">
                  <span :style="{width:FillInNum+'%',position:'absolute'}" class="h-15"></span>
                </span>
                   <router-link :to="{name: 'userInfoEdit'}">
                <div @click="switchType(7)" class="h-16" style="    cursor: pointer;">完善></div>
                   </router-link>
              </div>
              <div class="h-17">
                <div class="h-18 active">
                  <img class="h-19" v-if="user.emailFlag" src="@/assets/image/user8_on.png" />
                  <img class="h-20" v-if="!user.emailFlag" src="@/assets/image/user8.png" />

                  <div class="h-22" v-if="user.emailFlag">已认证</div>
                  <div class="h-21" v-if="!user.emailFlag">未认证</div>
                </div>
                <div class="h-18">
                  <img class="h-19" v-if="user.phoneFlag" src="@/assets/image/user12_on.png" />
                  <img class="h-20" v-if="!user.phoneFlag" src="@/assets/image/user12.png" />
                  <div class="h-22" v-if="user.phoneFlag">已绑定</div>
                  <div class="h-21" v-if="!user.phoneFlag">未绑定</div>
                </div>
                <div class="h-18">
                  <img class="h-19" v-if="user.emailFlag" src="@/assets/image/user14_on.png" />
                  <img class="h-20" v-if="!user.emailFlag" src="@/assets/image/user14.png" />
                  <div class="h-22" v-if="user.emailFlag">已绑定</div>
                  <div class="h-21" v-if="!user.emailFlag">未绑定</div>
                </div>
              </div>
              <div class="h-23">
                <a href="javascript:;" class="h-24" @click="checkUserInfo()">
                  <span class="h-24">添加挂牌</span>
                  <!-- <router-link :to="{name: 'addTrading'}" class="h-24">添加挂牌</router-link> -->
                </a>
              </div>
              <div class="h-25">已认证</div>
            </div>
            <ul class="h-26">
              <router-link :to="{name: 'myTrading'}">
                <li :class="type==1?'active':''" @click="switchType(1)">
                  <a href="javascript:;">我的挂牌</a>
                </li>
              </router-link>
              <router-link :to="{name: 'myDelist'}">
                <li :class="type==2?'active':''" @click="switchType(2)">
                  <a href="javascript:;">我的摘牌</a>
                </li>
              </router-link>
              <router-link :to="{name: 'myContract'}">
                <li :class="type==3?'active':''" @click="switchType(3)">
                  <a href="javascript:;">我的合同</a>
                </li>
              </router-link>
              <router-link :to="{name: 'mybill'}">
                <li :class="type==4?'active':''" @click="switchType(4)">
                  <a href="javascript:;">我的账单</a>
                </li>
              </router-link>
              <router-link :to="{name: 'myCollection'}">
                <li :class="type==5?'active':''" @click="switchType(5)">
                  <a href="javascript:;">我的收藏</a>
                </li>
              </router-link>
              <router-link :to="{name: 'myInvoice'}">
                <li :class="type==6?'active':''" @click="switchType(6)">
                  <a href="javascript:;">我的发票</a>
                </li>
              </router-link>
              <router-link :to="{name: 'userInfoEdit'}">
                <li :class="type==7?'active':''" @click="switchType(7)">
                  <a href="javascript:;">账户设置</a>
                </li>
              </router-link>
              <router-link :to="{name: 'myNews'}">
                <li :class="type==8?'active':''" @click="switchType(8)">
                  <a href="javascript:;">我的消息</a>
                </li>
              </router-link>
            </ul>
          </div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var _self;
import { userinfo } from "@/api/header";
import Header from "@/views/header.vue";
export default {
  components: {
    Header,
  },
  name: "userIndex",
  data() {
    return {
      FillInNum: 1,
      type: 0,
      user: Object,
      animate: false,
      noticeList: ["消息"],
    };
  },
  created() {
    this.noticeList = JSON.parse(window.sessionStorage.getItem("lb"));
    _self = this;
    //setInterval(this.scroll,5000);
    userinfo().then((res) => {
      //console.log(res);
      if (res.data.noFillInNum==0) {
         this.FillInNum =100
      }else{
  this.FillInNum =
        Math.round((10 / res.data.noFillInNum) * 10000) /
        100.0;
      }
    
      this.user = res.data;
    });
  },
  methods: {
    switchType(e) {
      this.type = e;
    },
    checkUserInfo() {
      //if(_self.allFillInNum!=_self.noFillInNum){
      //    _self.$message.error('请先完善个人资料');
      // _self.$router.push("userInfoEdit");
      // _self.type=7;
      // return false
      // }
      _self.$router.push("addTrading");
      _self.type = 0;
    },
    getxx(){

    },
    //消息滚动
    // scroll(){
    //     let con1 = this.$refs.con1;
    //     con1.style.marginTop='-30px';
    //     this.animate=!this.animate;
    //     var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
    //     setTimeout(function(){
    //         that.items.push(that.items[0]);
    //         that.items.shift();
    //         con1.style.marginTop='0px';
    //         that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
    //     },5000)
    // }
  },
};
</script>

<style scoped>
@import "../../css/index.css";
@import "../../css/user_listing.css";
@import "../../css/idangerous.swiper.css";
/*消息滚动*/
#box {
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-top: 15px;
  padding-left: 30px;
  transition: all 0.5s;
}
.anim {
  transition: all 0.5s;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
.el-carousel {
  padding-top: 15px;
}

.el-carousel__item:nth-child(2n) {
  background-color: transparent;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: transparent;
}
</style>
